<template>
  <div class="after-sales-management">
    <!-- 筛选栏 -->
    <el-form :inline="true" :model="filters" class="filter-form">
      <el-form-item label="订单号">
        <el-input
          v-model="filters.orderNo"
          placeholder="请输入内容"
          clearable
        />
      </el-form-item>
      <el-form-item label="售后ID">
        <el-input
          v-model="filters.afterId"
          placeholder="请输入内容"
          clearable
        />
      </el-form-item>
      <el-form-item label="自提点类型">
        <el-select v-model="filters.pickupType" placeholder="全部" clearable>
          <el-option label="全部" value="" />
          <el-option label="菜鸟驿站" value="菜鸟驿站" />
          <el-option label="社区自提" value="社区自提" />
        </el-select>
      </el-form-item>
      <el-form-item label="售后类型">
        <el-select v-model="filters.afterType" placeholder="全部" clearable>
          <el-option label="全部" value="" />
          <el-option label="未收到货-仅退款" value="未收到货-仅退款" />
          <el-option label="少件/漏件" value="少件/漏件" />
        </el-select>
      </el-form-item>
      <el-form-item label="自提点">
        <el-input
          v-model="filters.pickupName"
          placeholder="请输入内容"
          clearable
        />
      </el-form-item>
      <el-form-item label="用户">
        <el-input v-model="filters.user" placeholder="请输入内容" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
        <el-button type="success" @click="onBatchApprove">批量通过</el-button>
        <el-button type="danger" @click="onBatchReject">批量驳回</el-button>
      </el-form-item>
    </el-form>

    <!-- tab切换 -->
    <el-tabs v-model="activeTab" class="tab-bar">
      <el-tab-pane label="待审核" name="pending" />
      <el-tab-pane label="已通过" name="approved" />
      <el-tab-pane label="已作废" name="rejected" />
    </el-tabs>

    <!-- 表格 -->
    <el-table
      :data="pagedData"
      border
      style="width: 100%"
      @selection-change="onSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="afterId" label="售后ID" width="140" />
      <el-table-column prop="applyTime" label="申请时间" width="180" />
      <el-table-column prop="orderNo" label="关联订单" width="140" />
      <el-table-column prop="user" label="所属用户" width="120" />
      <el-table-column prop="pickupName" label="自提点名称" width="140" />
      <el-table-column prop="refundAmount" label="退款金额" width="100" />
      <el-table-column prop="afterType" label="售后类型" width="140" />
      <el-table-column prop="afterReason" label="售后原因" width="140" />
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="filteredData.length"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="onPageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const allRecords = ref([
  {
    afterId: "20200200003",
    applyTime: "2020-02-14 14:30:30",
    orderNo: "20202011100",
    user: "Axlab",
    pickupName: "菜鸟驿站",
    refundAmount: "10.00元",
    afterType: "未收到货-仅退款",
    afterReason: "少件/漏件",
    status: "pending",
  },
  {
    afterId: "20200200003",
    applyTime: "2020-02-14 14:30:30",
    orderNo: "20202011100",
    user: "Axlab",
    pickupName: "菜鸟驿站",
    refundAmount: "10.00元",
    afterType: "少件/漏件",
    afterReason: "少件/漏件",
    status: "pending",
  },
  {
    afterId: "20200200003",
    applyTime: "2020-02-14 14:30:30",
    orderNo: "20202011100",
    user: "Axlab",
    pickupName: "菜鸟驿站",
    refundAmount: "10.00元",
    afterType: "少件/漏件",
    afterReason: "少件/漏件",
    status: "pending",
  },
  {
    afterId: "20200200003",
    applyTime: "2020-02-14 14:30:30",
    orderNo: "20202011100",
    user: "Axlab",
    pickupName: "菜鸟驿站",
    refundAmount: "10.00元",
    afterType: "少件/漏件",
    afterReason: "少件/漏件",
    status: "pending",
  },
  {
    afterId: "20200200004",
    applyTime: "2020-02-15 10:00:00",
    orderNo: "20202011101",
    user: "Axlab",
    pickupName: "社区自提",
    refundAmount: "20.00元",
    afterType: "未收到货-仅退款",
    afterReason: "未收到货",
    status: "approved",
  },
  {
    afterId: "20200200005",
    applyTime: "2020-02-16 11:00:00",
    orderNo: "20202011102",
    user: "Axlab",
    pickupName: "社区自提",
    refundAmount: "15.00元",
    afterType: "少件/漏件",
    afterReason: "少件/漏件",
    status: "rejected",
  },
]);

const filters = ref({
  orderNo: "",
  afterId: "",
  pickupType: "",
  afterType: "",
  pickupName: "",
  user: "",
});

const activeTab = ref("pending");
const currentPage = ref(1);
const pageSize = 4;
const selectedRows = ref([]);

const filteredData = computed(() => {
  let data = allRecords.value.filter((r) => r.status === activeTab.value);
  if (filters.value.orderNo) {
    data = data.filter((r) => r.orderNo.includes(filters.value.orderNo));
  }
  if (filters.value.afterId) {
    data = data.filter((r) => r.afterId.includes(filters.value.afterId));
  }
  if (filters.value.pickupType) {
    data = data.filter((r) => r.pickupName === filters.value.pickupType);
  }
  if (filters.value.afterType) {
    data = data.filter((r) => r.afterType === filters.value.afterType);
  }
  if (filters.value.pickupName) {
    data = data.filter((r) => r.pickupName.includes(filters.value.pickupName));
  }
  if (filters.value.user) {
    data = data.filter((r) => r.user.includes(filters.value.user));
  }
  return data;
});

const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  return filteredData.value.slice(start, start + pageSize);
});

function onSearch() {
  currentPage.value = 1;
}
function onReset() {
  filters.value = {
    orderNo: "",
    afterId: "",
    pickupType: "",
    afterType: "",
    pickupName: "",
    user: "",
  };
  currentPage.value = 1;
}
function onBatchApprove() {
  alert("批量通过功能待实现，已选中" + selectedRows.value.length + "条");
}
function onBatchReject() {
  alert("批量驳回功能待实现，已选中" + selectedRows.value.length + "条");
}
function onSelectionChange(val) {
  selectedRows.value = val;
}
function onPageChange(page) {
  currentPage.value = page;
}
</script>

<style scoped>
.after-sales-management {
  padding: 24px;
}
.filter-form {
  margin-bottom: 16px;
}
.tab-bar {
  margin-bottom: 16px;
}
.pagination-wrapper {
  margin-top: 16px;
  text-align: right;
}
</style>